react-number-format

What is react-number-format?

The react-number-format package is a React component designed for formatting number input fields. It allows users to format numbers as currency, percentages, decimals, phone numbers, credit card numbers, and other custom formats. It also supports features like custom prefix, suffix, and thousand separator, masking, and custom formatting.

What are react-number-format's main functionalities?

Number Formatting

This feature allows you to format numbers with thousands separators and add a prefix. In this example, the number 2456981 is formatted as currency with a dollar sign prefix and commas as thousand separators, displayed as $2,456,981.

import NumberFormat from 'react-number-format';

<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />

Custom Format

This feature enables custom formatting for inputs. Here, the format prop defines the pattern for a phone number and the mask prop is used for placeholder characters, allowing users to enter a phone number in the format ###-###-####.

import NumberFormat from 'react-number-format';

<NumberFormat format="###-###-####" mask="_" />

Currency Formatting

This feature is used to format input as currency. It includes a thousand separator, a dollar sign prefix, and ensures that there are always two decimal places.

import NumberFormat from 'react-number-format';

<NumberFormat thousandSeparator={true} prefix={'$'} decimalScale={2} fixedDecimalScale={true} />

Other packages similar to react-number-format

cleave.js

Cleave.js is a library that can format input text content when you are typing. It provides similar functionalities to react-number-format, such as number formatting, credit card formatting, phone number formatting, and date formatting. It differs in that it is not React-specific and can be used with plain JavaScript or other frameworks.

numeral

Numeral is a library for formatting and manipulating numbers. It's similar to react-number-format in that it can format numbers as currency, percentages, and other formats. However, it is not a React component and does not handle input fields directly. It is more focused on number manipulation and formatting in general JavaScript applications.

currency.js

Currency.js is a small and lightweight library for working with currency values. It allows you to perform arithmetic operations and formatting on currency numbers. While it provides similar currency formatting capabilities, it does not come as a React component and is more suited for general arithmetic and formatting operations rather than handling user input.

README

react-number-format

React Number Format is an input-formatter library with a sophisticated and light weight caret engine. It ensures that a user can only enter text that meets specific numeric or string patterns, and formats the input value for display.

Features

1. Prefix, suffix and thousands separator.
2. Input Masking.
3. Format number in an input or format as a simple text.
4. Custom pattern formatting.
5. Custom formatting handler.
6. Fully customizable

Demos

See the many DEMO sections in the documentation.

Install

Using npm

npm install react-number-format

Using yarn

yarn add react-number-format

Documentation

Read the full documentation here https://s-yadav.github.io/react-number-format/docs/intro

ES6

Numeric Format

import { NumericFormat } from 'react-number-format';

NumericFormat Props: https://s-yadav.github.io/react-number-format/docs/numeric_format

Pattern Format

import { PatternFormat } from 'react-number-format';

PatternFormat Props: https://s-yadav.github.io/react-number-format/docs/pattern_format

Migrate from v4 to v5

https://s-yadav.github.io/react-number-format/docs/migration

v4 doc

v4 Docs

Development

• Clone the repository or download the zip
• npm i -g yarn to download Yarn
• yarn to install dependencies
• yarn start to run example server (http://localhost:8084/)
• yarn test to test changes
• yarn build to bundle files

Testing

Test cases are written in jasmine and run by karma

Test files : /test/**/*.spec.js

To run test : yarn test